<template>
  <div class="wrapper">
    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="12">
        <div class="label">姓名</div>
        <el-input placeholder="姓名" size="small" v-model="paramsState.name" style="width: 200px">
        </el-input>
        <el-button style="margin-left: 10px" type="primary" size="small" icon="el-icon-search"
                   @click="search">搜索
        </el-button>
        <el-button style="margin-left: 10px" type="primary" size="small" icon="el-icon-download"
                   @click="downloadList">批量下载
        </el-button>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <el-table :data="tableData" v-loading="listLoading" border @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          fixed
          align="center"
          width="45">
      </el-table-column>
      <el-table-column show-overflow-tooltip v-for="field in fields" :key="field.prop" :prop="field.prop"
                       :label="field.label"
                       :width="field.width" :align="field.align">
      </el-table-column>
      <el-table-column label="操作" width="240" align="center" fixed="right">
        <template v-slot="{ row }">
          <el-button type="text" title="检查图片" @click="lookImages(row)">检查图片</el-button>
          <el-button type="text" title="编辑" @click="handle(row)">编辑</el-button>
          <el-button type="text" title="文档下载" @click="downloadFile(row.wordUrl)">文档下载</el-button>
          <el-button type="text" title="删除" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :current-page="paramsState.startpoint" :page-size="paramsState.nums" :total="paramsState.total"
                   :page-sizes="[5, 10, 20, 30]" style="padding: 20px 0"
                   layout="prev, pager, next, jumper, ->, sizes, total"
                   @current-change="currentChange" @size-change="sizeChange"/>

    <!-- 查看 or 编辑框-->
    <el-dialog :title="findData.readonly ? '查看' : '编辑'" width="800px" :visible.sync="Visible" @closed="resetDialog">
      <el-form v-loading="loading" size="small" class="formRow" label-position="top">
        <el-row :gutter="15">
          <el-col :span="5">
            <el-form-item label="姓名" prop="name">
              <el-input class="w100" v-model="findData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学习进度" prop="learning_progress">
              <el-input class="w100" type="number" v-model="findData.learning_progress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="考试分数" prop="exam_score">
              <el-input-number class="w100" v-model="findData.exam_score" controls-position="right" :min="0" :max="100"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="考试时间" prop="exam_time">
              <el-date-picker class="w100" v-model="findData.exam_time" type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select class="w100" v-model="findData.status" placeholder="请选择">
                <el-option label="未开始" value="未开始" />
                <el-option label="进行中" value="进行中" />
                <el-option label="已完成" value="已完成" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="类型" prop="type">
              <el-select class="w100" v-model="findData.type" placeholder="请选择">
                <el-option label="日常培训" value="日常培训" />
                <el-option label="岗前培训" value="岗前培训" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="培训开始时间" prop="start_time">
              <el-date-picker class="w100" v-model="findData.start_time" type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训内容" prop="training_content">
              <el-input type="textarea" :rows="10" class="w100" v-model="findData.training_content"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="进入课程照片" prop="entry_photo">
              <upload v-model="findData.entry_photo"></upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="照片1" prop="during_course_photo1">
              <upload v-model="findData.during_course_photo1"></upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="照片2" prop="during_course_photo2">
              <upload v-model="findData.during_course_photo2"></upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试前照片" prop="before_exam_photo">
              <upload v-model="findData.before_exam_photo"></upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试后签名" prop="signature_image_link">
              <upload v-model="findData.signature_image_link"></upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="考试结果" prop="answer_info">
              <el-input type="textarea" :rows="10" class="w100" v-model="findData.answer_info"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button v-if="!findData.readonly" type="primary" :loading="loading" @click="onSubmit">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="检查图片" width="800px" :visible.sync="imagesVisible" @closed="resetDialog">
      <el-form size="small" class="formImages" label-position="top" v-if="imagesVisible">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="进入课程照片">
              <el-image class="image" :src="findData.entry_photo" lazy :preview-src-list="[findData.entry_photo]"
                        fit="cover">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="照片1">
              <el-image class="image" :src="findData.during_course_photo1" lazy
                        :preview-src-list="[findData.during_course_photo1]"
                        fit="cover">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="照片2">
              <el-image class="image" :src="findData.during_course_photo2" lazy
                        :preview-src-list="[findData.during_course_photo2]"
                        fit="cover">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="考试前照片">
              <el-image class="image" :src="findData.before_exam_photo" lazy
                        :preview-src-list="[findData.before_exam_photo]"
                        fit="cover">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试后签名">
              <el-image class="image" :src="findData.signature_image_link" lazy
                        :preview-src-list="[findData.signature_image_link]"
                        fit="cover">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  Update_examination_record,
  Deletion_of_examination_record,
  Examination_record_search,
  delete_escort
} from "@/api/index"
import moment from "moment"
import upload from "../driverList/components/upload.vue"
import { downloadFile } from "@/utils/index"

export default {
  name: "examination",
  components:{
    upload
  },
  data() {
    return {
      // 加载
      listLoading: false,
      // 详情弹窗
      Visible: false,
      updateVisible: false,
      // 搜索用户相关
      paramsState: {
        name: '',
        startpoint: 1,
        nums: 10,
        total: 0
      },
      // 用户列表相关
      tableData: [],
      // 详情加载中
      loading: false,
      type: 'rgxd',

      // 操作的数据信息
      findData: {
        id: '',
        name: '',
        learning_progress: '',
        exam_score: '',
        exam_time: '',
        status: '',
        type: '',
        training_content: '',
        start_time: '',
        entry_photo: '',
        during_course_photo1: '',
        during_course_photo2: '',
        before_exam_photo: '',
        signature_image_link: '',
        answer_info: ''
      },
      fields: [
        {label: '姓名', prop: 'name', width: '', align: 'center'},
        {label: '学习进度', prop: 'learning_progress', width: '', align: 'center'},
        {label: '考试分数', prop: 'exam_score', width: '', align: 'center'},
        {label: '考试时间', prop: 'exam_time', width: '200', align: 'center'},
        {label: '状态', prop: 'status', width: '', align: 'center'},
        {label: '类型', prop: 'type', width: '', align: 'center'},
        {label: '培训内容', prop: 'training_content', width: '', align: 'center'},
        {label: '开始时间', prop: 'start_time', width: '200', align: 'center'}
      ],
      imagesVisible: false,
      multipleSelection:[]
    }
  },
  methods: {
    downloadFile,
    // 批量下载
    downloadList(){
      const length = this.multipleSelection.length;
      if (length <= 0) {
        this.$message({
          message: '请选择数据',
          type: 'warning'
        });
        return;
      }

      this.$confirm(`确定要下载选中的${length}条数据吗`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.multipleSelection.forEach(item => {
          downloadFile(item.wordUrl);
        })
      })
    },
    // 表格选择事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 获取列表数据
    async getList() {
      this.listLoading = true
      try {
        let params = {
          ...this.paramsState
        }

        delete params.time
        delete params.total

        let result = await Examination_record_search(params)
        this.tableData = result.data
        this.listLoading = false

        this.paramsState.total = result.total
        console.log(result.data)
      } catch (error) {
        this.listLoading = false
        this.$message.error("获取列表失败，请重试")
      }
    },
    // 根据用户输入进行查询
    search() {
      this.paramsState.startpoint = 1
      this.getList()
    },
    sizeChange(e) {
      this.paramsState.nums = e
      this.getList()
    },
    currentChange(e) {
      this.paramsState.startpoint = e
      this.getList()
    },
    resetDialog() {
      this.findData = {}
    },
    // 保存
    onSubmit() {
      this.loading = true;
      let params = {
        ...this.findData
      }
      console.log(params, "提交参数")

      Update_examination_record(params).then(result => {
        console.log(result, "更新")
        this.$message.success(result.msg)
        this.getList()
        this.Visible = false
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    // 检查图片
    lookImages(row) {
      this.findData = {
        ...row,
      }
      console.log(row)
      this.imagesVisible = true
    },
    // 显示详情
    handle(row) {
      this.findData = {
        ...row
      }
      this.Visible = true
    },
    // 删除用户
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Deletion_of_examination_record({id: row.id}).then(() => {
          this.$message({
            type: 'success', message: '删除成功!'
          })
          this.getList()
        })
      })
    }
  },
  async mounted() {
    await this.getList()
  }
}
</script>

<style lang="scss" scoped>
.table-avatar {
  width: 40px;
  height: 40px;
}

::v-deep .image-table-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.wrapper {
  margin: 20px;

  .image {
    width: 100%;
    max-height: 250px;
  }

  .label {
    font-size: 14px;
    color: #333;
    padding-bottom: 10px;
  }
}

::v-deep .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.formRow {

  &.disabled {
    pointer-events: none;
  }


  .el-col {
    padding: 8px 0;

    .label {
      font-weight: 500;
      margin-right: 10px;
      color: #444;
    }

    .headimg_view {
      margin-left: 50%;
      transform: translateX(-50%);
      overflow: hidden;

      .avatar {
        width: 120px;
        height: 120px;
        font-size: 0;
      }

      ::v-deep .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #eee;

        .iocn {
          font-size: 20px;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }

  .sourceList {
    .item {
      padding: 10px;
      background-color: #f8f8f8;
      border-bottom: 1px solid #ddd;

      &:last-child {
        border-bottom: 0;
      }

      .box {
        padding: 5px 0;
        display: flex;

        .label {
          color: #666;
          padding-right: 20px;
        }
      }
    }
  }
}

.dataList {
  margin-bottom: 20px;

  .desc {
    margin-top: 10px;
    color: #888;
  }

  .dataTitle {
    font-weight: 500;
    color: #333;
  }
}

//::v-deep .el-form-item__label {
//  width: 100%;
//}

.flex {
  display: flex;

  span {
    b {
      color: #f46162;
    }
  }

  &.between {
    justify-content: space-between;
  }
}
</style>
